<template>
  <div v-drag>
    <div class="mask" @click="closeTip(false)"></div>
    <div class="edit_box">
      <div class="box_head">
        <p>{{title?'「'+title+'」':''}}绑定角色</p>
        <i @click="closeTip(false)"></i>
      </div>
      <div class="box_body bind_box" v-loading="dataLoad">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>关键词：</span>
          <div>
            <el-input type="text" placeholder="请输入关键词" v-model="keyword" @input="getBindData"></el-input>
          </div>
        </div>
        <div class="check_box">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
          </el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkList" @change="handleCheckItemChange">
            <el-checkbox v-for="(item,index) in tableInfo" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <p class="error_line">{{ tipText }}</p>
      </div>
      <div class="box_foot">
        <span @click="closeTip(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>

import {getAllList,getListByUserId,assignData} from '@/api/sys/role'

export default {
  props: ['userId','roleIds','title'],
  data() {
    return {
      dataLoad: false,
      keyword: '',
      tableInfo: [],
      list: [],
      checkList: [],
      tipText: '',
      checkAll: false,
      isIndeterminate: true
    }
  },
  mounted() {
    this.getBindData();
  },

  methods: {
    getBindData() {
      let that = this;
      that.dataLoad = true;
      let arr = [];
      let queryParams = {
        name:that.keyword
      }
      getAllList(queryParams).then(res => {
        if (res) {
          that.tableInfo = res;
          that.tableInfo.forEach((item, index) => {
            arr.push(item.id);
          })
          that.list = arr;
          that.getCheckData(res)
        }else {
          that.tableInfo = []
        }
        that.dataLoad = false;
      }).catch((e) => {
        that.dataLoad = false;
      });
    },

    getCheckData(table) {
      let that = this;
      let queryParams = {
        userId:that.userId
      }
      getListByUserId(queryParams).then(res => {
        if (res) {
          that.checkList =  JSON.parse('[' + res + ']');
          if (that.checkList.length === table.length) {
            that.isIndeterminate = false;
            that.checkAll = true;
          }
        }else{
          that.checkList = []
        }
      })
    },

    // 全选
    handleCheckAllChange(val) {
      this.checkList = val ? this.list : [];
      this.isIndeterminate = false;
    },

    // 单选
    handleCheckItemChange(val) {
      this.isIndeterminate = this.checkList.length !== this.list.length && this.checkList.length !== 0;
      this.checkAll = this.checkList.length === this.list.length;
    },


    confirmEdit() {
      let data = '';
      this.checkList.forEach((item, i) => {
        data = data + (i > 0 ? ',' : '') + item;
      });
      this.bindEvents(data)
    },

    bindEvents(data) {
      let that = this;
      if (that.checkList && that.checkList.length === 0) {
        that.$message.error({
          message:'请先勾选角色',
          duration:1500
        });
      } else {
        that.dataLoad = true;
        let param = {
          userId:that.userId,
          roleIdList:data
        }
        assignData(param).then(response => {
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.closeTip(true);
          that.dataLoad = false;
        }).catch((e) => {
          that.dataLoad = false;
        });
      }
    },

    closeTip(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.box_body {
  min-height: 300px;
}
</style>
